【CSS】@media - スタイルの適用条件

CSSの@mediaについて解説します。

@media

@mediaはメディアごとのスタイルを定義します。

メディアとはデバイス（ディスプレイやプリンタ等）や画面及び出力のサイズです。

主にデスクトップパソコンやスマートフォンなど画面サイズが異なるデバイスに対応したレスポンシブデザインを作成する際に使用します。

基本構文

@media 条件 {
    スタイル
}

条件の部分にはメディアタイプやメディア特性などを指定し、またそれらを組み合わせることも可能です。

メディアタイプ

メディアタイプはディスプレイや印刷などの出力先です。

@media タイプ {
    スタイル
}

主なタイプは次の通りです。

<style>
@media screen {
    p {
        color: red;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>

メディア特性

メディア特性はデバイスやブラウザなどのサイズです。

@media (特性名: 値) {
    スタイル
}

主な特性は次の通りです。

次のサンプルはp要素のテキストカラーを赤色にしていますが、Webブラウザの横幅が600px以下の場合は青色になります。

デスクトップパソコンとスマートフォンでこのプレビューを比較すると色が異なることが確認できます。

<style>
p {
    color: red;
}

@media ( max-width: 600px ) {
    p {
        color: blue;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>

メディアクエリー

メディアクエリーはメディアタイプやメディア特性の条件を結合するキーワードです。

@media 条件 結合子 条件 {
    スタイル
}

次のサンプルはp要素のテキストカラーを赤色にしていますが、ディスプレイかつ横幅が600px以下の場合は青色に設定しています。

デスクトップとスマートフォンでこのプレビューを比較すると色が異なることが分かります。

<style>
p {
    color: red;
}

@media screen and ( max-width: 600px ) {
    p {
        color: blue;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>